<template>
    <div class="MySettings">
        <van-popup
            duration="1"
            v-model="showw"
            position="left"
            :round="roundYn"
            :style="{ width: '90%', height: '100%' }"
        >
            <!-- 背景图 -->
            <div class="top">
                <img src="../assets/Daft Punk11.png" alt="" />
            </div>

            <div class="content_box">
                <div class="content">
                    <!-- 基础信息 -->
                    <div class="BasicInformation">
                        <div
                            class="headPortrait"
                            :style="{ backgroundImage: 'url(' + avatarUrl + ')' }"
                        ></div>
                        <div class="p_box">
                            <div class="name">{{nickname}}</div>
                            <div class="Grade">Lv.{{level}}</div>
                        </div>
                    </div>

                    <!-- 功能应用 -->
                    <div class="Fn_box">
                        <div
                            class="Fn"
                            v-for="(item, index) in Icon"
                            :key="index"
                        >
                            <div class="surface" @click="goVIP(item.vip)">
                                <div class="Icon">
                                    <img :src="item.imgUrl" alt="" />
                                </div>
                                <div class="text">{{ item.text }}</div>
                            </div>

                            <div></div>
                        </div>
                    </div>
                </div>

                <!-- 底部功能盒 -->
                <div class="bottom">
                    <!-- 设置 -->
                    <div class="settings">
                        <div class="img_box">
                            <img src="../assets/shez.png" alt="" />
                        </div>
                        <div class="text">设置</div>
                    </div>
                    <!-- 退出登录 -->
                    <div class="logOut">
                        <div class="img_box">
                            <img src="../assets/out.png" alt="" />
                        </div>
                        <div class="text">退出登录</div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex';
const {
    mapState: AccountMapState,
    mapMutations: AccountMapMutations,
    mapGetters: AccountMapGetters,
    mapActions: AccountMapActions
} = createNamespacedHelpers('Account');

export default {
    name: "MySettings",

    data() {
        return {
            Icon: [
                {
                    imgUrl: require("../assets/mys (1).png"),
                    text: "我的信息"
                },
                {
                    imgUrl: require("../assets/mys (3).png"),
                    text: "商城"
                },
                {
                    imgUrl: require("../assets/mys (2).png"),
                    text: "会员中心",
                    vip: true
                },
                {
                    imgUrl: require("../assets/mys (5).png"),
                    text: "我的好友"
                },
                {
                    imgUrl: require("../assets/mys (4).png"),
                    text: "音乐识别"
                },
            ],
            // 动画类名
            roundYn: true,
        }
    },
    methods: {
        ...mapMutations({
            // 控制 标签栏位置开关
            MySettings_TB_Fn(commit, tf) {
                commit('MySettings_TB_Fn', tf);
            }
        }),
        // 前往vip路由
        goVIP(vip) {
            if (vip) {
                this.$router.push({ name: "Vip" });
            }
        },
        
    },
    computed: {
        //弹出层 显示开关
        showw: {
            get() {
                // console.log("666666", this.$store.state.showMySettings);
                this.roundYn = this.$store.state.showMySettings;
                return this.$store.state.showMySettings;
            },

            //设置
            set(tf) {
                // console.log("🚀 ==> set ==> tf", tf);
                this.MySettings_TB_Fn(tf)
            }
        },
           
        ...AccountMapState(['avatarUrl','nickname','level']),
    
    },
}
</script>

<style lang="less" scoped>
.MySettings {
    .van-popup {
        border-bottom-right-radius: 0;

        // 背景图
        .top {
            position: absolute;
            background-color: #000;
            width: 100%;
            height: 100%;
            top: -70px;
            z-index: -1;

            img {
                display: block;
                width: 100%;

                height: auto;
                -moz-transform: scaleX(-1);
                -webkit-transform: scaleX(-1);
                -o-transform: scaleX(-1);
                transform: scaleX(-1);
                filter: fliph;
            }
        }

        // 内容盒
        .content_box {
            height: 74%;
            position: absolute;
            background-color: #2c2c2c;
            bottom: 0;
            left: 0;
            right: 0;

            // 三角形
            &::before {
                content: '';
                width: 0;
                height: 0;
                border: solid 80px;
                border-top-color: transparent;
                border-left-color: transparent;
                border-bottom-color: transparent;
                border-right-color: #2c2c2c;
                border-right-width: 400px;
                position: absolute;

                z-index: -1;
                top: -70px;
                right: 0;
            }

            // 内容区
            .content {
                // background-color: #fff;
                margin: 0 0 0 35px;
                transform: translateY(-65px);

                // 基础信息
                .BasicInformation {
                    display: flex;
                    margin-bottom: 45px;

                    // 头像
                    .headPortrait {
                        flex-shrink: 0;
                        width: 80px;
                        height: 80px;
                        border-radius: 50%;
                        // background-color: #000;
                        background-image: url('../assets/tx.png');
                        background-position: center center;
                        background-size: contain;
                    }

                    // 文本
                    .p_box {
                        display: flex;
                        align-self: flex-end;
                        letter-spacing: 1px;

                        // 用户名字
                        .name {
                            max-width: 175px;
                            color: #727173;
                            font-size: 15px;
                            font-weight: 600;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            word-break: break-all;
                        }
                        // 用户等级
                        .Grade {
                            align-self: flex-end;
                            color: #5a5a5a;
                            margin-left: 5px;
                        }
                    }
                }

                // 功能应用盒
                .Fn_box {
                    // 功能元素
                    .Fn {
                        margin-bottom: 20px;
                        // 外观
                        .surface {
                            display: flex;
                            align-items: center;
                            // 图标
                            .Icon {
                                padding: 5px;
                                margin-right: 10px;
                                background-color: #221018;
                                border-radius: 50%;
                                img {
                                    width: 28px;
                                    height: 28px;
                                    display: block;
                                }
                            }
                            // 文本
                            .text {
                                color: #fff;
                                letter-spacing: 2px;
                            }
                        }
                    }

                    & .Fn:nth-child(3) {
                        margin-bottom: 40px;
                    }
                }
            }
        }

        // 底部功能盒
        .bottom {
            position: absolute;
            bottom: 0;
            display: flex;
            margin-left: 35px;
            margin-bottom: 15px;
            .settings,
            .logOut {
                display: flex;
                align-items: center;

                .img_box {
                    padding: 5px;
                    margin-right: 10px;
                    background-color: #221018;
                    border-radius: 50%;
                }
                .text {
                    color: #fff;
                }
            }
            .logOut {
                margin-left: 70px;
            }
            img {
                display: block;
                width: 28px;
                height: 28px;
            }
        }
    }
}
</style>